<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop"
           [clrModalClosable]="closable">
  <h3 class="modal-title">添加用户</h3>
  <div class="modal-body modal-height">
    <form clrForm #userForm='ngForm'>
      <clr-input-container>
        <label>用户名:</label>
        <input clrInput size=45 maxlength="30" type="text" [(ngModel)]="user.username" name="username"
               (change)="checkUsernameDuplicate()" required>
        <clr-control-helper *ngIf="isUserNameDuplicate">此用户名已被使用!</clr-control-helper>
      </clr-input-container>

      <clr-input-container>
        <label>邮箱:</label>
        <input clrInput type="email"
               pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?"
               size=45
               [(ngModel)]="user.email" name="email" required>
        <clr-control-error>请输入正确格式的邮箱地址!</clr-control-error>
      </clr-input-container>

      <clr-password-container>
        <label>
          密码:
        </label>
        <input clrPassword size=40 minlength="6" maxlength="30" type="password" [(ngModel)]="user.password" name="name"
               (change)="checkPassword()" pattern="^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$" required>
        <clr-control-helper *ngIf="!isPasswordMatch && user.password &&user.ensurePassword">密码不一致！</clr-control-helper>
        <clr-control-error>有效密码:6-30位,英文字母+数字+特殊字符(可选)</clr-control-error>

      </clr-password-container>

      <clr-password-container>
        <label>
          确认密码:
        </label>
        <input clrPassword size=40 minlength="6" maxlength="30" type="password" [(ngModel)]="user.ensurePassword"
               name="name"
               (change)="checkPassword()"
               pattern="^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$"
               required>
        <clr-control-helper *ngIf="!isPasswordMatch && user.password &&user.ensurePassword">密码不一致！</clr-control-helper>
        <clr-control-error>有效密码:6-30位,英文字母+数字+特殊字符(可选)</clr-control-error>
      </clr-password-container>

      <clr-checkbox-container>
        <label>超级管理员</label>
        <clr-checkbox-wrapper>
          <input clrToggle type="checkbox" name="admin" [(ngModel)]="user.is_superuser">
        </clr-checkbox-wrapper>
      </clr-checkbox-container>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="isUserNameDuplicate || !isPasswordMatch||userFrom.invalid || isSubmitGoing">
          <i *ngIf="isSubmitGoing" class="fa fa-spinner fa-pulse"></i>提交
        </button>
      </div>
    </form>
  </div>
</clr-modal>

